<template>
  <div class="app-page" style="flex: 1">
    <t-button v-loading="loading" @click="initMenu">初始化菜单</t-button>
    <t-button v-loading="loading" @click="importMenu">导入菜单数据</t-button>
    <t-button v-loading="loading" @click="exportMenu">导出菜单数据</t-button>
    <t-button v-loading="loading" @click="copyMenu">复制菜单数据</t-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import api from '@/pages/system/auth/menu/api';
import { getMenus } from './init';
import { copyToClipboard, exportJSON, importJSON } from '@/soar';

const loading = ref(false);

function handler(promise: any) {
  promise
    .then(() => {})
    .finally(() => {
      loading.value = false;
    });
  loading.value = true;
  return promise;
}

function initMenu() {
  handler(getMenus().then(api.batchCreate));
}

function importMenu() {
  importJSON().then((res) => {
    handler(api.batchCreate(res));
  });
}

function exportMenu() {
  handler(getMenus().then((x: any) => exportJSON(x, 'menus.json')));
}

function copyMenu() {
  handler(getMenus().then((x: any) => copyToClipboard(JSON.stringify(x))));
}
</script>
